<template>
    <div id="box">
        <!-- 头部按钮区域 -->
        <div class="head">
            <el-input v-model="queryInfo.query" placeholder="请输入项目名称" class="input_search"></el-input>
            <el-button type="primary" @click="search" class="bthSearch">搜索</el-button>
            <el-button @click="batchDel" class="bthNormal">批量删除</el-button>
            <el-button @click="getWarningData" class="bthNormal">刷新</el-button>
        </div>

        <!-- 表格 -->
        <el-table
            :data="warningData"
            @selection-change="handleSelectionChange"
            :row-style="{ height: '30px' }"
            :header-cell-style="{ background: '#005ab5', color: 'black' }"
            style="font-size: 15px; font-family: microsoft yahei; color: black"
            border
        >
            <el-table-column type="selection" width="50" align="center" header-align="center"></el-table-column>
            <el-table-column label="序号" type="index" width="80"></el-table-column>

            <el-table-column prop="belongingPro" label="所属项目"></el-table-column>
            <el-table-column prop="warningLocation" label="预警地点"></el-table-column>
            <el-table-column prop="warningType" label="预警类型"></el-table-column>
            <el-table-column prop="warningTime" label="预警时间"></el-table-column>
            <el-table-column prop="noticeStatus" label="通知状态"></el-table-column>
            <el-table-column prop="handleStatus" label="处理状态"></el-table-column>
            <el-table-column prop="handlePersonnel" label="处理人员"></el-table-column>
            <el-table-column prop="date" label="操作">
                <template slot-scope="scope">
                    <!-- 修改 -->
                    <!-- <span class="fontNormal" style="cursor: pointer" @click="showSet(scope.row)">修改</span> -->
                    <!-- 删除 -->
                    <span class="fontNormal" @click="del(scope.row.id)">删除</span>
                    <span class="fontNormal" @click="showdialogVisible1(scope.row.id)">处理</span>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            style="padding: 30px 0; text-align: center"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[50, 100, 200, 400]"
            :page-size="queryInfo.pagesize"
            layout="total, prev, pager, next, jumper"
            :total="total"
            background
        >
        </el-pagination>
        <el-dialog :visible.sync="dialogVisible1" width="45%" id="wyff">
            <!-- title -->
            <div slot="title" style="text-align: center">
                <span>分发APP外业</span>
            </div>

            <!-- 穿梭框 -->
            <span>任务要求: <el-input v-model="misson.input" placeholder="请输入内容" style="width: 100%"></el-input></span>
            <br />
            <br />
            <el-transfer
                v-model="transferValue"
                :data="transferData"
                :props="{ key: 'id', label: 'userName' }"
                filterable
                :titles="['全部人员', '分发人员']"
                :button-texts="['移除', '选取']"
            />
            <el-button type="primary" class="distributeBtn" @click="distribute">确认分发</el-button>
        </el-dialog>
        <!-- 修改对话框 -->
        <el-dialog title="预警信息" :visible.sync="dialogVisible" width="50%" @close="reset">
            <!-- 表单 -->
            <el-form :model="setRuleForm" :rules="setRules" ref="setRef" label-width="80px" id="form">
                <el-form-item label="所属项目" prop="belongingPro">
                    <el-input v-model="setRuleForm.belongingPro" style="width: 96%" :disabled="true"></el-input>
                </el-form-item>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="预警地点" prop="warningLocation">
                            <el-input v-model="setRuleForm.warningLocation"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="预警类型" prop="warningType">
                            <el-input v-model="setRuleForm.warningType"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="预警时间" prop="warningTime">
                            <el-input v-model="setRuleForm.warningTime"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="通知状态" prop="noticeStatus">
                            <el-input v-model="setRuleForm.noticeStatus"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="处理状态" prop="handleStatus">
                            <el-input v-model="setRuleForm.handleStatus"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="处理人员" prop="handlePersonnel">
                            <el-input v-model="setRuleForm.handlePersonnel"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="setWarning">修 改</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import pro from '@/api/warning/warning';
export default {
    created() {
        this.getWarningData();
    },
    data() {
        return {
            misson: {
                input: ''
            },
            // 穿梭框数据
            transferData: [],
            // 穿梭框所选的数据
            transferValue: [],
            dialogVisible1: false,
            // 表格数据
            warningData: [],
            // 查询表格所需的参数
            queryInfo: {
                // 搜索的内容
                query: '',
                // 当前页码
                pagenum: 1,
                // 每页显示的条数
                pagesize: 15
            },
            // 总数
            total: 0,
            // 对话框
            dialogVisible: false,
            // 修改的表单
            setRuleForm: {},
            // 修改表单的验证规则
            setRules: {
                belongingPro: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                warningLocation: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                warningType: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                warningTime: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                noticeStatus: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                handleStatus: [{ required: true, message: '内容不得为空！', trigger: 'blur' }],
                handlePersonnel: [{ required: true, message: '内容不得为空！', trigger: 'blur' }]
            },
            // 批量删除的id数组
            batchList: []
        };
    },
    methods: {
        // 外业分发
        distribute() {
            return this.$message.error('功能待完善');
            // if (this.misson.input === '') return this.$message.error('请输入任务内容');
            // if (this.transferValue.length === 0) return this.$message.error('请选择分发的人员');
            // for (var a = 0; a < this.batchList.length; a++) {
            //     let form = new FormData();
            //     form.set('proId', this.batchList[a].proId);
            //     form.set('userId', this.transferValue);
            //     form.set('task',this.misson.input)
            //     pro.mission(form);
            // }
            // this.transferValue= []
            // this.misson.input = ''
            // this.dialogVisible = false;
            // this.$message.success('分发成功')
        },
        // 显示外业穿梭框
        showdialogVisible1(id) {
            if (this.batchList.length == 0 && id == null) return this.$message.error('请选择要操作的项目');
            // 获取外业分发数据
            this.getDistributeData();
            this.dialogVisible1 = true;
        },
        // 获取穿梭框数据
        async getDistributeData() {
            const { data: res } = await this.$http.post('/mobile/mobile/getField');
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            this.transferData = res.data;
        },
        // 获取表格数据
        async getWarningData() {
            const { data: res } = await this.$http.post(
                `/project_source/real_time/warningInformation/page/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}`
            );
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            // console.log(res)
            this.total = res.data.total;
            this.warningData = res.data.rows;
        },
        // 模糊查询
        async search() {
            // 判断用户有无输入内容
            if (this.queryInfo.query.trim() == '') return this.$message.error('请输入搜索内容');

            const { data: res } = await this.$http.post(
                `/project_source/real_time/warningInformation/dimQuery/${this.queryInfo.query}/${this.queryInfo.pagenum}/${this.queryInfo.pagesize}`
            );
            if (res.code != 20000) return this.$message.error('获取列表失败！');
            // console.log(res)
            this.total = res.data.total;
            this.warningData = res.data.rows;
        },
        // 监听每页显示多少条数据
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize;
            this.getWarningData();
        },
        // 监听当前页码改变的事件
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage;
            this.getWarningData();
        },
        // 重置表单
        reset() {
            this.$refs.setRef.resetFields();
        },
        // 显示修改对话框
        showSet(row) {
            // console.log(row)
            this.setRuleForm = row;
            this.dialogVisible = true;
        },
        // 修改
        setWarning() {
            // // 表单预校验
            // this.$refs.setRef.validate(async (valid) => {
            //   if(!valid) return this.$message.error("请按要求填写！")
            //   // console.log(this.setRuleForm)
            //   // 发送请求
            //   const {data:res} = await this.$http.post('/project_source/real_time/warningInformation/updata', { params: this.setRuleForm })
            //   if(res.code != 20000)return this.$message.error('修改失败！')
            //   console.log(res)
            //   this.$message.success('修改成功')
            //   this.dialogVisible = false
            //   this.getWarningData()
            // })
            this.setRuleForm.updateTime = null;
            this.setRuleForm.createTime = null;
            pro.updata(this.setRuleForm).then((response) => {
                this.$message({
                    type: 'success',
                    message: '修改成功!'
                });
                this.getWarningData();
            });

            this.dialogVisible = false;
        },
        // 删除
        del(id) {
            this.$confirm('此操作将删除当前预警信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // 发送请求
                const { data: res } = await this.$http.post(`/project_source/real_time/warningInformation/delete/${id}`);
                if (res.code != 20000) return this.$message.error('删除失败！');
                this.$message.success('删除成功');
                this.getWarningData();
            });
        },
        // 监听表格选择
        handleSelectionChange(val) {
            this.batchList = val;
        },
        // 批量删除
        batchDel() {
            if (this.batchList.length == 0) return this.$message.error('请选择要删除的项目');
            // console.log(this.tableChecked)
            var idList = [];
            // 处理数组
            for (let i = 0; i < this.batchList.length; i++) {
                idList.push(this.batchList[i].id);
            }

            var idStr = idList.join(',');

            this.$confirm('此操作将删除所选的项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // console.log(idList)
                // 发送请求
                this.$http.post('/project_source/real_time/warningInformation/deleteall', { ids: idList }).then((res) => {
                    this.$message.success('删除成功');
                    this.getWarningData();
                });
            });
        }
    }
};
</script>
<style scoped>
#box {
    width: 99%;
    overflow: hidden;
    background: #ffffff;
    display: block;
    margin-left: 1%;
    padding: 15px;
    box-sizing: border-box;
}
/* 搜索框以及按钮样式 */
.head {
    margin-bottom: 8px;
}
.head .input_search {
    width: 150px;
    margin-right: 10px;
}
.bthSearch {
    background-color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
}
.bthNormal {
    border-color: #848484;
    font-size: 15px;
    font-family: 微软雅黑;
}
/* 表格区域样式 */
.fontNormal {
    margin: 0 5px;
    color: #356cb3;
    font-size: 15px;
    font-family: 微软雅黑;
    cursor: pointer;
}
/* 对话框内样式 */
/* /deep/ #form .el-input{
    width: 90%;
  } */
</style>
